<template>
  <view>
    <view class="infobox">
      <view class="linebox">
        <view>头像</view>
        <view>
          <!-- http://f.sheshouduo.cn/20240119/4506faab7a754433a34f03af17702a33.png -->
          <u-upload
            :fileList="fileList"
            @afterRead="afterRead($event, fileList)"
            @delete="deletePic"
            name="6"
            width="96rpx"
            height="96rpx"
            :deletable="false"
            :previewFullImage="false"
            :previewImage="false"
          >
            <image
              v-if="userinfo.avatarUrl"
              :src="`${baseimgURL}${userinfo.avatarUrl}`"
              mode="widthFix"
              style="width: 96rpx; height: 96rpx"
            ></image>
            <image
              v-else
              src="@/static/img/defaultHead.png"
              mode="widthFix"
              style="width: 96rpx; height: 96rpx"
            ></image>
          </u-upload>
        </view>
      </view>
      <view class="linebox" @tap="open('setname')">
        <view>名字</view>
        <view
          >{{ userinfo.nickName }}
          <u-icon color="#999999" size="24" name="arrow-right"></u-icon
        ></view>
      </view>
      <view class="linebox" >
        <view>手机号</view>
        <view
          >{{ userinfo.mobile }}
          <u-icon color="#999999" size="24" name="arrow-right"></u-icon
        ></view>
      </view>
      <view class="linebox">
        <view>二维码</view>
        <image
          @tap="maopen"
          class="erweima"
          mode="widthFix"
          src="@/static/img/erweima.png"
        ></image>
      </view>
    </view>
    <u-popup :show="show" @close="close" :closeable="true">
      <view class="editbox">
        <view class="setvalue">设置名字</view>
        <view class="flex">
          <up-input
            :focus="true"
            @confirm="confirm"
            placeholder="请输入内容"
            border="surround"
            v-model="modelvalue"
          ></up-input>
        
        </view>
		<view class="queren" @tap="confirm">
			完成
		</view>
      </view>
    </u-popup>
    <renzhengpopup ref="maRef"></renzhengpopup>

    <!-- <u-button @click="open">打开</u-button> -->
  </view>
</template>

<script lang="ts" setup>
import { baseimgURL } from '@/config'
import { ref, reactive } from "vue";
import { onShow } from "@dcloudio/uni-app";
import renzhengpopup from "@/components/renzhengpopup";
import { baseURL } from "@/utils/request";
import { membersmodify } from "@/utils/api";
import { membersinfo } from "@/utils/api";
onShow(() => {
  userinfo.value = JSON.parse(uni.getStorageSync("userinfo"));
});
const userinfo = ref({});
const fileList = ref([]);
const model = ref("");
const show = ref(false);

const modelvalue = ref("");
const maRef = ref(null);
const open = (modeltype) => {
  model.value = modeltype;
  if (modeltype == "setname") {
    modelvalue.value = userinfo.value.nickName;
  } else {
    modelvalue.value = userinfo.value.mobile;
  }
  show.value = true;
};
const confirm = () => {
  let param = {};
  if (model.value == "setname") {
    param = {
      id: userinfo.value.id,
      nickName: modelvalue.value,
    };
  } else {
    param = {
      id: userinfo.value.id,
      mobile: modelvalue.value,
    };
  }
  submitmodify(param);
};
const submitmodify = (param) => {
  membersmodify(param).then((res) => {
    show.value = false;
    membersinfo().then((meinfo) => {
      userinfo.value.nickName = meinfo.data.nickName;
      userinfo.value.mobile = meinfo.data.mobile;
      uni.setStorageSync("userinfo", JSON.stringify(meinfo.data));
      uni.setStorageSync("mobile", meinfo.data.mobile);
      uni.setStorageSync("nickName", meinfo.data.nickName);
    });
  });
};
const close = () => {
  show.value = false;
};
const maopen = () => {
  maRef.value.maopen();
};

const jumpedit = () => {
  uni.navigateTo({
    url: url,
  });
};
// const resultimg=ref("http://192.168.0.37:9000/zgyp/20231229/d7317047bed94ab3860e1ad32833ca5a.png")
// 新增图片
const afterRead = async (event, list) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);

  let fileListLen = list.length;
  lists.map((item) => {
    list.push({
      ...item,
      status: "uploading",
      message: "上传中",
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url);
    // const result = "http://192.168.0.37:9000/zgyp/20231229/585a9ac20b14408b8183c8008097690e.jpg";
    const resulturl =  JSON.parse(result).data.url;
    userinfo.value.avatarUrl = resulturl;
    let item = list[fileListLen];
    let param = {
      id: userinfo.value.id,
      avatarUrl: resulturl,
    };
    submitmodify(param);
    // membersmodify(param).then((res) => {
    //   membersinfo().then((meinfo) => {
    //     uni.setStorageSync("userinfo", JSON.stringify(meinfo.data));
    //   });
    // });
    // list.splice(fileListLen, 1, {
    //   ...item,
    //   status: "success",
    //   message: "",
    //   url: resulturl,
    // });
    fileListLen++;
  }
};

const uploadFilePromise = (url) => {
  const token = uni.getStorageSync("token");
  const token_type = uni.getStorageSync("token_type");
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: `${baseURL}/zgyp-system/api/v1/files`, // 仅为示例，非真实的接口地址
      filePath: url,
      name: "file",
      header: {
        "content-type": "application/json",
        Authorization: `${token_type} ` + `${token}`,
      },
      formData: {
			typeCode: 'members', //功能编码
			fieldProperty: 'avatarUrl', //字段属性名
      },
      success: (res) => {
        resolve(res.data);
      },
    });
  });
};
</script>
<style lang="scss" scoped>
.infobox {
  background: #ffffff;
  .linebox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #f4f4f4;
    padding: 20rpx 20rpx 30rpx 30rpx;
    .medeafult {
      width: 96rpx;
      height: 96rpx;
      border-radius: 7rpx;
    }
    .erweima {
      width: 53rpx;
      height: 53rpx;
    }
    ::v-deep .u-icon--right {
      display: inline-block;
    }
  }
}
.editbox {
  padding: 20rpx;
  height: 90vh;
}
.setvalue {
  font-size: 26rpx;
  text-align: center;
  margin-bottom: 40rpx;
}
.btn {
  width: 200rpx;
  margin-left: 20rpx;
}
.queren{
	  width: 200rpx;
    text-align: center;
    background: #1cd66c;
    padding: 10rpx;
    color: #ffffff;
    margin: 60rpx auto;
    border-radius: 10rpx;
}
</style>
